import React from "react";
import { Form, Input, Button, Checkbox, Space, message } from "antd";
import login from "../model/login";
import {
  DatabaseTwoTone,
  LockTwoTone,
  SmileTwoTone,
} from "@ant-design/icons";
export default function Login(props:any) {
  const success = () => {
    message.success('登录成功');
  };
  
  const error = () => {
    message.error('登录失败');
  };
  const onFinish =async (values: any) => {
    // console.log("Success:", values);
    let {username,password}=values;
    console.log(username,password);
    let res=await login.query({account:username,userpwd:password});
    // console.log(res);
    if(res.data.length>0){
      success();
      window.localStorage.setItem("userid",res.data[0].id)
      props.history.push("/system");
    }else{
      error();
    }
    
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log("Failed:", errorInfo);
    error();
  };
  return (
    <div className="log">
      <div className="login">
        <div className="title">
          <Space>
            <DatabaseTwoTone />
          </Space>
          荣创知识付费运营管理后台
        </div>
        <div className="title2">
          专业数字化管理与用户运营工具，提高知识付费转化率
        </div>
        <div className="tip">账号密码登录</div>
        <Form
          className="from"
          style={{ width: "400px" }}
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            label=""
            name="username"
            rules={[
              { required: true, message: "请输入账号!" },
              {
                pattern: /^[1-9][0-9]{3,7}$/,
                message: "账号必须是非0开头的4-8位纯数字",
              },
            ]}
          >
            <Space
              style={{
                position: "absolute",
                left: "115px",
                bottom: "30px",
                zIndex: 8,
              }}
            >
              <SmileTwoTone />
            </Space>
            <Form.Item name="username">
            <Input
              placeholder="用户名"
              style={{
                marginLeft: "100px",
                marginTop: "40px",
                paddingLeft: "40px",
              }}
            />
              </Form.Item>
            
          </Form.Item>

          <Form.Item
            label=""
            name="password"
            rules={[
              { required: true, message: "请输入密码!" },
              {
                pattern: /^[a-z0-9]{6,14}$/i,
                message: "密码必须是6-14位由数字/字母组成",
              },
            ]}
          >
            <Space
              style={{
                position: "absolute",
                left: "115px",
                bottom: "30px",
                zIndex: 8,
              }}
            >
              <LockTwoTone />
            </Space>
            <Form.Item name="password">
            <Input.Password
              placeholder="密码"
              style={{ marginLeft: "100px", paddingLeft: "40px" }}
            />
            </Form.Item>
           
          </Form.Item>

          <Form.Item
            name="remember"
            valuePropName="checked"
            wrapperCol={{ offset: 8, span: 16 }}
          >
            <Checkbox>记住密码</Checkbox>
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" htmlType="submit" style={{ width: "180px" }}>
              提交
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
}
